<template>
	<u-button type="primary" :custom-style="active ? btnActiveStyle : btnDefaultStyle" hover-class="none"
	@click="$emit('click',$event)"
		class="u-margin-right-20">
		<slot></slot>
	</u-button>
</template>

<script>
	export default {
		props: {
			active: {
				type: Boolean,
				default: false,
			},
			width: {
				type: String,
				default: '200rpx',
			}
		},
		data() {
			return {
				btnActiveStyle: {
					background: 'transparent',
					'border-radius': '6rpx',
					color: '#ff4a17',
					border: '1rpx solid #ff4a17',
					height: '60rpx',
					width: this.width,
					margin: '0 !important'
				},
				btnDefaultStyle: {
					background: 'transparent',
					'border-radius': '6rpx',
					color: '#999999',
					border: '1rpx solid #999999',
					height: '60rpx',
					width: this.width,
					margin: '0 !important'
				},
			};
		}
	}
</script>

<style lang="scss" scoped>
	.carTitle {
		justify-content: center;
		font-size: 34rpx;
		line-height: 70rpx;

		.icon {
			width: 30rpx;
			height: 30rpx;

			&.rotate {
				transform: rotate(180deg);
			}
		}
	}
</style>